<template>
	<view class="editCourse">
		<view class="title flex flex-wrap md-sm justify-between solid-bottom align-start">
			<text class="text-black  basis-xs text-lg text-bold">课程名称</text>
			<view class="courseMsg basis-xl text-lg text-gray">
				<input type="text" v-model="detail.name" placeholder="请输入添加课程的名称">
			</view>
		</view>
		<view class="title flex flex-wrap md-sm justify-between align-start">
			<text class="text-black  basis-xs text-lg text-bold">课程周期</text>
			<view class="courseMsg basis-xl text-lg text-gray" style="text-align: right;">
				<!-- 选择周数 -->
				<picker class="width-100" mode="multiSelector" :range="timeList" :value="timesIndex"
					@change="bindContentChange" @columnchange="bindColumeChange">
					<view>
						第{{timeList[0][timesIndex[0]]}}-{{timeList[1][timesIndex[1]]}}周
					</view>
				</picker>
			</view>
		</view>
		<view class="title flex flex-wrap md-sm justify-between ">
			<text class="text-black  basis-xs text-lg text-bold">课程属性</text>
			<view class="courseMsg basis-xl text-lg text-gray" style="text-align: right;">
				<radio-group @change="changeRadio" style="margin-left: 30rpx;">
					<label v-for="item in identity" :key="item" style="margin-left: 20rpx;">
						<radio class="round" :value="item" :checked="item==radioValue" />{{item}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="title flex flex-wrap md-sm justify-between ">
			<text class="text-black  basis-xs text-lg text-bold">课程节数</text>
			<view class="courseMsg basis-xl text-lg text-gray">
				<input type="text" v-model="pickNumber" disabled>
			</view>
		</view>
		<view class="title flex flex-wrap md-sm justify-between ">
			<text class="text-black  basis-xs text-lg text-bold">教室地点</text>
			<view class="courseMsg basis-xl text-lg text-gray">
				<input type="text" v-model="detail.classroom" placeholder="请输入上课地点">
			</view>
		</view>
		<view class="title flex flex-wrap md-sm justify-between ">
			<text class="text-black  basis-xs text-lg text-bold">任课教师</text>
			<view class="courseMsg basis-xl text-lg text-gray">
				<input type="text" v-model="detail.teacher" placeholder="请输入任课老师">
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg margin-tb-sm" @click="changeSubmit">保存</button>
			<button class="cu-btn bg-grey lg margin-tb-sm">取消</button>
			<button class="cu-btn bg-red lg margin-tb-sm">删除课程</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeList: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
						'18', '19'
					],
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
						'18', '19'
					]
				],
				timesIndex: [0, 0],
				radioValue: '全选', //选中的value值
				identity: ['单周', '双周', '全选'],
				detail: {},
				pickNumber: '',
				number: {
					"一": "[1-2]",
					"二": "[3-4]",
					"三": "[5-6]",
					"四": "[7-8]",
					"五": "[9-10]",
				}
			};
		},
		methods: {
			bindContentChange(e) {
				console.log(e.target)
				this.timesIndex = e.target.value
			},
			bindColumeChange(e) {
				if (e.target.column == 0) {
					this.handleAry(e.target.value)
				}
			},
			handleAry(index) {
				let that = this
				that.$set(that.timeList, 1, [])
				let arr = []
				let num = 19 - index
				for (let i = 0; i < num; i++) {
					arr.push(index + 1)
					index++
				}
				that.$set(that.timeList, 1, arr)
			},
			changeRadio(e) {
				this.radioValue = e.detail.value;
				// console.log(this.radioValue);
			},
			async changeSubmit() {
				let str = ''
				str += this.detail.name + "%"
				str += this.detail.teacher + "%"
				str += this.detail.start + "-" + this.detail.end
				str += this.radioValue === "全选" ? "" : (" " + this.radioValue[0] + " ")
				str += this.number[this.detail.numbers]
				str += "%" + this.this.detail.classroom
				console.log(str);
			}
		},
		onLoad() {
			console.warn(this.$store.state.w_timeTable);
			this.detail = this.$store.state.w_timeTable.detailMessage[0]
			// 周期处理
			this.timesIndex = [this.detail.start - 1, this.detail.end - 1]
			// 属性处理
			this.radioValue = this.detail.weekChoose
			// 节数处理
			const objWeeks = {
				"Monday": '周一',
				"Tuesday": '周二',
				"Wednesday": '周三',
				"Thursday": '周四',
				"Friday": '周五',
				"Saturday": '周六',
				"Wednesday": '周日',
			}
			const nums = {
				'一': '[1-2]',
				'二': '[3-4]',
				'三': '[5-6]',
				'四': '[7-8]',
				'五': '[9-10]',
			}
			this.pickNumber = objWeeks[this.detail.time] + ' ' + nums[this.detail.numbers] + '节'

		}
	}
</script>

<style lang="scss" scoped>
	.editCourse {
		width: 90%;
		margin: 0 auto;

		.title {
			padding: 1rem 0;
		}

		input {
			text-align: right;
			color: #3d3d3d;
			margin: -2px;
		}


		.round:before {
			content: none;
		}
	}
</style>
